<!--
 * @Author: yanzengyong 709402944@qq.com
 * @Date: 2025-08-14 10:51:59
 * @LastEditors: yanzengyong 709402944@qq.com
 * @LastEditTime: 2025-08-21 20:09:03
 * @FilePath: /cyj-boot-parent/cyj-boot-web/src/views/demo/pure/MultipleFormInpExample/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="pure-container">
    <div class="form-container">
      <a-form :model="formState" name="basic" layout="inline" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" @submit="onSubmit">
        <a-form-item label="项目名称:" name="name">
          <a-input v-model:value="formState.name" placeholder="请输入项目名称" />
        </a-form-item>

        <a-form-item label="项目实施单位:" name="unit">
          <a-input v-model:value="formState.unit" placeholder="请输入项目实施单位" />
        </a-form-item>

        <a-form-item :wrapper-col="{ offset: 2, span: 16 }">
          <a-space>
            <a-button type="primary" html-type="submit">查询</a-button>
            <a-button @click="resetForm">重置</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </div>
    <div class="table-container">
      <div v-if="loading" class="loading-container">
        <a-spin size="large" />
      </div>
      <div class="operation-box">
        <div class="flex items-center">
          <div class="cyj-basic-table-header__tableTitle">
            <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleCreate">新增</a-button>
            <a-button preIcon="ant-design:export-outlined">导出</a-button>
            <j-upload-button preIcon="ant-design:import-outlined">导入</j-upload-button>
            <a-button preIcon="ant-design:sync-outlined" @click="handleRefreshCache">刷新缓存</a-button>
            <a-button preIcon="ant-design:hdd-outlined"> 回收站</a-button>

            <a-dropdown v-if="hasSelected">
              <template #overlay>
                <a-menu>
                  <a-menu-item key="1" @click="batchHandleDelete">
                    <Icon icon="ant-design:delete-outlined" />
                    删除
                  </a-menu-item>
                </a-menu>
              </template>
              <a-button
                >批量操作
                <Icon icon="ant-design:down-outlined" />
              </a-button>
            </a-dropdown>
          </div>

          <div class="cyj-basic-table-header__toolbar"> </div>
        </div>
        <div class="info-box">
          <a-alert type="info" show-icon class="alert">
            <template #message>
              <template v-if="hasSelected">
                <span>
                  <span>已选中 {{ selectedRowKeys.length }} 条记录</span>
                </span>
                <a-divider type="vertical" />
                <a @click="setSelectedRowKeys([])">清空</a>
              </template>
              <template v-else>
                <span>未选中任何数据</span>
              </template>
            </template>
          </a-alert>
        </div>
      </div>

      <div class="table-page-container">
        <div class="vex-table-container">
          <vxe-table
            header-row-class-name="vex-table-header"
            header-cell-class-name="vex-table-header-cell"
            row-class-name="vex-table-row"
            cell-class-name="vex-table-cell"
            :row-config="{ isHover: true }"
            @checkbox-all="selectAllChangeEvent"
            @checkbox-change="selectChangeEvent"
            ref="tableRef"
            id="id"
            size="mini"
            header-align="center"
            border
            max-height="100%"
            :loading="loading"
            :data="data"
          >
            <vxe-column type="checkbox" width="70" align="center" />
            <vxe-column type="seq" title="序号" width="70" align="center" />
            <vxe-column v-for="item in columns" :key="item.dataIndex" :field="item.dataIndex" :title="item.title" 
              show-header-overflow="title" show-overflow="title" min-width="150"
              :align="item.dataIndex === 'plannedInspectionStartTime' || item.dataIndex === 'plannedInspectionEndTime' ? 'center' : 'left'" />
            <vxe-column field="operation" title="操作" width="160" fixed="right">
              <template #default="{ row }">
                <PopConfirmButton :enable="false" type="link" size="small" color="success" @click="handleEdit(row)" label="编辑">
                  编辑
                </PopConfirmButton>
                <Divider type="vertical" class="action-divider" />
                <a-dropdown>
                  <a-button type="link" size="small"> 更多 <Icon icon="mdi-light:chevron-down" /> </a-button>
                  <template #overlay>
                    <a-menu>
                      <a-menu-item key="1">
                        <PopConfirmButton :enable="false" type="link" size="small" color="info" @click="handlePreview(row)" label="详情">
                          详情
                        </PopConfirmButton>
                      </a-menu-item>
                      <a-menu-item key="2">
                        <PopConfirmButton
                          overlayClassName="cyj-basic-table-action-popconfirm"
                          type="link"
                          size="small"
                          color="error"
                          title="确定删除吗?"
                          @confirm="deleteConfirm(row)"
                          label="删除"
                        >
                          删除
                        </PopConfirmButton>
                      </a-menu-item>
                    </a-menu>
                  </template>
                </a-dropdown>
              </template>
            </vxe-column>
            <template #empty>
              <div class="empty-box">
                <img :src="noDataPng" alt="" />
                <div>暂无数据</div>
              </div>
            </template>
            <!-- <template #loading>
              <div class="loading-container">
                <a-spin size="large"/>
              </div>
            </template> -->
          </vxe-table>
        </div>
        <Pagination
          v-model:current="pagination.current"
          v-model:page-size="pagination.pageSize"
          :total="pagination.total"
          :show-total="pagination.showTotal"
          showSizeChanger
          :page-size-options="pagination.pageSizeOptions"
          showQuickJumper
          size="small"
          @change="handleTableChange"
        />
      </div>
    </div>
  </div>
  <createDialog @register="registerModal" @onSuccess="onSuccess" />
</template>

<script setup lang="ts">
  import noDataPng from '/@/assets/images/table_nodata.png';
  import { ref, reactive, computed, onMounted } from 'vue';
  import { Divider, Pagination } from 'ant-design-vue';
  import { PopConfirmButton } from '/@/components/Button';
  import { useModal } from '/@/components/Modal';
  import createDialog from './createDialog.vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { listOnline } from '/@/api/demo/pure-table';
  import { VxeTableInstance, VxeTableEvents } from 'vxe-table';

  const $message = useMessage();

  //字典model
  const [registerModal, { openModal }] = useModal();

  /**表单查询 */
  interface FormState {
    name: string;
    unit: string;
  }

  const formState = reactive<FormState>({
    name: '',
    unit: '',
  });

  const resetForm = () => {
    formState.name = '';
    formState.unit = '';
    pagination.current = 1;
    pagination.pageSize = 10;
    getList();
  };

  const handleRefreshCache = () => {
    getList();
  };

  const onSubmit = () => {
    getList();
  };

  const handleEdit = (record) => {
    console.log('handleEdit----', record);
    openModal(true, {
      isUpdate: true,
      title: '列表示例编辑',
      record: {
        projectName: record.projectName,
        implementationStage: record.implementationStage,
        projectType: record.projectType,
        projectImplementationUnit: record.projectImplementationUnit,
        projectLocation: record.projectLocation,
        projectManager: record.projectManager,
        inspectionLeadDepartment: record.inspectionLeadDepartment,
        // plannedInspectionStartTime: record.plannedInspectionStartTime,
        // plannedInspectionEndTime: record.plannedInspectionEndTime,
      },
    });
  };

  const handlePreview = (record) => {
    openModal(true, {
      isUpdate: true,
      title: '列表示例查看',
      readonly: true,
      record: {
        projectName: record.projectName,
        implementationStage: record.implementationStage,
        projectType: record.projectType,
        projectImplementationUnit: record.projectImplementationUnit,
        projectLocation: record.projectLocation,
        projectManager: record.projectManager,
        inspectionLeadDepartment: record.inspectionLeadDepartment,
        // plannedInspectionStartTime: record.plannedInspectionStartTime,
        // plannedInspectionEndTime: record.plannedInspectionEndTime,
      },
    });
  };

  // 删除确认
  const deleteConfirm = (record) => {
    console.log('deleteConfirm----', record);
    $message.createMessage.success('删除成功！');
    getList();
  };

  const handleCreate = () => {
    console.log('handleCreate');
    openModal(true, {
      isUpdate: false,
      title: '列表示例新增',
    });
  };

  const batchHandleDelete = () => {
    console.log('batchHandleDelete');
    $message.createConfirm({
      title: '提示',
      iconType: 'success',
      content: '确定删除选中项吗？',
      onOk() {
        $message.createMessage.success('删除成功！');
        getList();
      },
    });
  };
  /**表单查询 */

  const columns = ref([
    {
      title: '项目名称',
      dataIndex: 'projectName',
    },
    {
      title: '实施阶段',
      dataIndex: 'implementationStage',
    },
    {
      title: '项目类型',
      dataIndex: 'projectType',
    },
    {
      title: '项目实施单位',
      dataIndex: 'projectImplementationUnit',
    },
    {
      title: '项目地点',
      dataIndex: 'projectLocation',
    },
    {
      title: '项目经理',
      dataIndex: 'projectManager',
    },
    {
      title: '检查牵头部门',
      dataIndex: 'inspectionLeadDepartment',
    },
    {
      title: '计划检查开始时间',
      dataIndex: 'plannedInspectionStartTime',
    },
    {
      title: '计划检查结束时间',
      dataIndex: 'plannedInspectionEndTime',
    },
  ]);

  interface listItem {
    id: string;
    projectName: string;
    implementationStage: string;
    projectType: string;
    projectImplementationUnit: string;
    projectLocation: string;
    projectManager: string;
    inspectionLeadDepartment: string;
    plannedInspectionStartTime: string;
    plannedInspectionEndTime: string;
  }

  const data = ref<listItem[]>([]);

  /**列表数据 */
  const pagination = reactive({
    current: 1,
    pageSize: 10,
    total: 60,
    showSizeChanger: true,
    pageSizeOptions: ['10', '20', '50', '100'],
    showQuickJumper: true,
    showTotal: (total) => `共 ${total} 条数据`,
    size: 'small',
  });

  const loading = ref<boolean>(false);

  const getList = async () => {
    loading.value = true;
    try {
      const res = await listOnline({
        column: 'createTime',
        order: 'desc',
        pageNo: pagination.current,
        pageSize: pagination.pageSize,
        projectName: formState.name,
        projectImplementationUnit: formState.unit,
      });
      console.log('res-------', res);
      data.value = res.data as listItem[];
      pagination.total = res.totalCount;
    } finally {
      loading.value = false;
    }
  };

  onMounted(async () => {
    getList();
  });

  // 表格变化处理（分页、排序）
  const handleTableChange = (current, size) => {
    console.log('pag', current, size);
    pagination.current = current;
    pagination.pageSize = size;
    getList();
  };
  /**列表数据 */

  /**列表选中相关内容 */
  type Key = string | number;
  const selectedRowKeys = ref<Key[]>([]);
  const tableRef = ref<VxeTableInstance<listItem>>();
  const selectAllChangeEvent: VxeTableEvents.CheckboxAll<listItem> = () => {
    const $table = tableRef.value;
    if ($table) {
      const records = $table.getCheckboxRecords();
      console.log('records-----', records);
      selectedRowKeys.value = records.map((item) => item.id);
    }
  };

  const selectChangeEvent: VxeTableEvents.CheckboxChange<listItem> = () => {
    const $table = tableRef.value;
    if ($table) {
      const records = $table.getCheckboxRecords();
      console.log('records-----', records);
      selectedRowKeys.value = records.map((item) => item.id);
    }
  };

  const hasSelected = computed(() => selectedRowKeys.value.length > 0);

  // 快捷设置列表选中值
  const setSelectedRowKeys = (keys: Key[]) => {
    const $table = tableRef.value;
    if ($table) {
      selectedRowKeys.value = keys;
      $table.setAllCheckboxRow(false);
    }
  };
  /**列表选中相关内容 */

  /** 新增/编辑成功 */
  const onSuccess = () => {
    getList();
  };
  /** */
</script>

<style scoped lang="less">
  .pure-container {
    height: 100%;
    width: 100%;
    .form-container {
      width: 100%;
      height: 56px;
      background-color: #fff;
      border-radius: 8px;
      margin-bottom: 8px;
      padding: 12px;
      box-sizing: border-box;
    }
    .table-container {
      width: 100%;
      height: calc(100% - 64px);
      background-color: #fff;
      border-radius: 8px;
      .loading-container {
        width: 100%;
        height: calc(100% - 100px);
        position: absolute;
        background: rgba(255, 255, 255, 0.6);
        z-index: 1;
        & > .ant-spin {
          top: 22%;
          position: absolute;
          right: 50%;
          z-index: 2;
          transform: translateX(-50%);
        }
      }

      .operation-box {
        width: 100%;
        padding: 12px;
        box-sizing: border-box;
        .cyj-basic-table-header__tableTitle > * {
          margin-right: 12px;
        }
        .info-box {
          margin-top: 8px;
          .alert {
            height: 38px;
          }
        }
      }
      .table-page-container {
        width: 100%;
        height: calc(100% - 102px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        .vex-table-container {
          width: 100%;
          height: calc(100% - 52px);
          padding: 0 12px;
        }
      }
    }
  }
  :deep(.ant-divider-vertical) {
    margin: 0 2px;
  }
  :deep(.ant-form) {
    height: 32px;
  }

  :deep(.ant-pagination) {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0 !important;
    padding: 12px;
    box-sizing: border-box;
    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1;
  }
</style>
